@import "media-queries";

.goods {
  .am-tabs-default .am-tabs-nav > .am-active a {
    color: $mainColor !important;
    background: white !important;
  }
  .mpy-tabs {
    margin: 0;
    ul {
      border: 0.1rem solid $mainFontColor;
      background: white;
    }
    ul > li > a {
      font-size: 1rem;
      display: inline-block;
      color: $mainFontColor;
      line-height: 1rem;
    }

    .order-icon {
      position: absolute;
      right: 1.1rem;
      vertical-align: middle;
      width: 0;
      i {
        top: 0;
        font-size: 0;
        width: 0;
        height: 0;
        line-height: 0;
        display: inline-block;
        vertical-align: -0.2rem;
        border: 0 dashed transparent;
        border-width: 0.5rem;
        position: absolute;
      }
      .order-icon-up {
        border-bottom-style: solid;
        border-bottom-color: #999;
        top: -0.7rem;
      }
      .order-icon-down {
        border-top-style: solid;
        border-top-color: #999;
        top: 0.7rem;
      }
    }
    .order-down {
      position: relative;
      margin-bottom: 0.2rem;
      .order-icon {
        .order-icon-down {
          border-top-color: #000;
        }
        .order-icon-up {
          border-bottom-color: #999;
        }
      }
    }
    .order-up {
      position: relative;
      .order-icon {
        .order-icon-down {
          border-top-color: #999;
        }
        .order-icon-up {
          border-bottom-color: #000;
        }
      }
    }
  }
  .mpy-tabs-nav-screen {
    position: relative;
    border-left: 0.1rem solid $mainFontColor;
    a {
      padding-left: 1rem;
    }
    img {
      position: absolute;
      left: 1rem;
      vertical-align: middle;
      top: 50%;
      margin-top: -0.75rem;
      width: 1.5rem;
      height: 1.5rem;
    }
  }
  .mpy-tab-panel {
    padding: 0;
    border: 0;
    background: #eeeeee;
    .mpy-goods-list {
      margin: auto 1rem;
      border: 0 !important;
      .mpy-goods-item {
        display: block;
        background-color: $backgroudColor;
        border: 0.3rem solid #eeeeee;
        img {
          margin-bottom: 0;
          border: 0;
          height: 14.5rem;
          width: 14.5rem;
          padding: 0 !important;
        }
        h1 {
          margin: 0 1rem;
          line-height: 1.5rem;
          font-size: 1rem;
        }
        span {
          display: block;
          width: 12rem;
          margin-left: 1rem;
          font-size: 1.2rem;
          line-height: 2rem;
          color: $AuxiliaryRedColor;
        }
      }
    }

  }
  .mpy-accordion-box {
    background: #fff;
    height: 100%;
    margin: 0;
    display: none;
    * {
      border: 0;
    }
    .mpy-accordion-item {
      margin: 0;
      .mpy-accordion-title {
        border-bottom: 0.1rem solid #cccccc;
        background: #fff;
        padding-top: 0.5rem;
        span {
          font-size: 1.2rem;
          color: $mainFontColor;
        }
        .mpy-screen-checked {
          font-size: 1.2rem;
          color: $mainColor;
          margin-right: 0.2rem;
        }
      }
      ul {
        padding: 0.5rem 0;
        text-align: center;
        border: 0;
        li {
          height: auto;
          label {
            input:checked + span {
              background: $mainColor;
            }
            input {
              display: none;
            }
            span {
              width: 6rem;
              height: 3rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              line-height: 3rem;
              background: #eeeeee;
              display: block;
              text-align: center;
              font-size: 1rem;
              padding: 0 1rem;
              color: $AuxiliaryFontBlackColor;
              border-radius: 0.1rem;
            }
          }
        }
      }
    }

  }
  .mpy-pagination {
    margin: 0.2rem;
    * {
      background: none !important;
      font-size: 1.2rem;
    }
    *:focus {
      color: $mainColor;
    }
    .mpy-pagination-prev {
      margin-left: 3rem;
    }
    .mpy-pagination-next {
      margin-right: 3rem;
    }
  }
}

.mpy-goods-screen-opt {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 0;
  display: none;
  z-index: 100;
  span {
    width: 50%;
    display: inline-block;
  }
  span:last-child {
    background: #FCD846;
  }
}